<template>
  <div class="item_detail">
    <van-swipe @change="onChange">
      <van-swipe-item
        v-for="(image, index) in goods.info.gallery"
        :key="index"
        style="position: relative"
      >
        <video-player
          v-if="playerOptions.sources[0].src && index == 0"
          ref="videoPlayer"
          width="100%"
          webkit-playsinline
          x5-playsinline
          x5-video-player-fullscreen="true"
          class="video-player vjs-custom-skin"
          style="object-fit: fill"
          :playsinline="playsinline"
          :options="playerOptions"
          @canplay="onPlayerCanplay($event)"
          @ended="onPlayerEnded($event)"
        >
        </video-player>
        <span
          v-if="playerOptions.sources[0].src && index == 0"
          @click="closePlayer"
          style="
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            cursor: pointer;
          "
          >关闭</span
        >
        <!-- div解决image标签下面有4px溢出 -->
        <div
          v-else
          image
          :style="{ backgroundImage: `url(${image})` }"
          style="width: 100%; padding-bottom: 100%; background-size: 100% 100%"
        ></div>
      </van-swipe-item>
      <div class="custom-indicator" slot="indicator">
        {{ current + 1 }}/{{ gallerysize }}
      </div>
    </van-swipe>
    <van-cell-group class="item_cell_group" v-if="goods">
      <van-cell class="item_info">
        <div>
          <div style="display: flex">
            <span class="item_price">{{
              (goods.info.retailPrice * 100) | yuan
            }}</span>
            <div
              class="cont5"
              v-if="userInfo.memberLevel == 2 || userInfo.memberLevel == 1"
              v-show="goods.info.memberPrice > 0"
            >
              <span>{{ (goods.info.memberPrice * 100) | yuan }}</span>

              <img src="@/assets/images/member_price.png" alt />
            </div>
          </div>
          <span
            class="item_market_price"
            v-if="
              goods.info.counterPrice != null && goods.info.counterPrice > 0
            "
            >{{ (goods.info.counterPrice * 100) | yuan }}</span
          >
        </div>
        <div class="item-title">{{ goods.info.name }}</div>
        <div class="item_intro">{{ goods.info.brief }}</div>
        <!-- <van-button style="position:absolute;bottom:10px;right:10px;border:0" :icon="share_icon" type="default"></van-button> -->
      </van-cell>
      <van-cell
        v-if="goods.giftList !== undefined && goods.giftList.length > 0"
      >
        <div style="width: calc((100% - 21px) / 7); float: left">优惠</div>
        <div
          style="
            width: calc(100% - (100% - 21px) / 7);
            float: left;
            display: flex;
          "
        >
          <div>
            <span
              style="
                padding: 0 5px;
                margin-right: 10px;
                background-color: pink;
                color: #d80000;
                font-size: 12px;
                width: 30px;
                line-height: 16px;
                text-align: center;
              "
              >赠品</span
            >
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              width: calc(100% - 44px);
            "
          >
            <van-cell
              v-for="(gift, index) in goods.giftList"
              :key="index"
              style="padding: 0"
              isLink
              :to="{ path: `/items/detail/${gift.giftId}` }"
              >{{ gift.giftName }}</van-cell
            >
          </div>
        </div>
      </van-cell>
    </van-cell-group>

    <div class="subsequent">
      <img
        :src="member_card_link"
        alt
        v-if="this.$route.params.id == 1 || 'e'"
        @click="choose_right(1)"
      />
      <img
        :src="orgkai"
        alt
        v-if="this.$route.params.id == 2"
        @click="choose_right(2)"
      />
    </div>

    <div class="item_cell_group" style="margin-bottom: 0">
      <van-cell-group>
        <van-cell
          title="选择"
          isLink
          value="请选择商品规格"
          @click.native="skuClick"
        />
        <!-- <van-cell title="参数" isLink @click.native="propsPopup = true" /> -->
        <van-cell title="运费" value="到付" />
      </van-cell-group>
      <van-sku
        v-model="showSku"
        :sku="sku"
        :hide-stock="false"
        :goods="skuGoods"
        :close-on-click-overlay="true"
        :goodsId="goods.info.id"
        :show-add-cart-btn="showAddCar"
        :initial-sku="initialSku"
        :quota="quota"
        @buy-clicked="buyGoods"
        @add-cart="addCart"
        @sku-selected="skuSelected"
        @stepper-change="stepperChange"
        :hide-quota-text="false"
      >
        <!-- 自定义 sku-header-price -->
        <template #sku-header-price>
          <div
            style="display: flex; flex-direction: column"
            v-if="memberObj.memberPrice > 0 && isOpen"
          >
            <span
              class="item_price"
              style="
                font-size: 16px;
                color: red;
                padding-bottom: 10px;
                margin-right: 10px;
                font-weight: 600;
              "
              >{{ memberObj.price | yuan }}</span
            >
            <div
              class="cont5"
              v-if="userInfo.memberLevel == 2 || userInfo.memberLevel == 1"
            >
              <span>{{ (memberObj.memberPrice * 100) | yuan }}</span>
              <span
                style="
                  background: #040000;
                  color: #fee727;
                  border-radius: 40px;
                  padding: 1px 8px;
                  height: 16px;
                  font-weight: 400;
                  margin-left: 8px;
                  font-size: 10px;
                  line-height: 15px;
                "
                >会员价</span
              >
              <!-- <img src="@/assets/images/member_price.png" alt /> -->
            </div>
          </div>
        </template>
      </van-sku>
      <van-popup v-model="propsPopup" position="bottom">
        <popup-props :propsStr="props_str"></popup-props>
      </van-popup>
    </div>
    <div
      style="
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        display: flex;
        justify-content: center;
      "
      v-if="goods.info.detail != ''"
    >
      <span
        style="
          height: 0px;
          border: 0.6px solid #d0d0d0;
          display: inline-block;
          margin: 21.7px 5px;
          width: 70px;
        "
      ></span>
      <span>详情</span>
      <span
        style="
          height: 0px;
          border: 0.6px solid #d0d0d0;
          display: inline-block;
          margin: 21.7px 5px;
          width: 70px;
        "
      ></span>
    </div>
    <div class="item_desc" v-if="goods.info.detail != ''">
      <!-- <div class="item_desc_title">商品详情</div> -->
      <div
        class="item_desc_wrap"
        v-if="goods.info.detail"
        v-html="goods.info.detail"
      ></div>
      <div class="item_desc_wrap" v-else style="text-align: center">
        <p>无详情</p>
      </div>
    </div>

    <van-goods-action>
      <div
        role="button"
        tabindex="0"
        class="van-goods-action-icon"
        @click="toCart"
      >
        <van-icon name="cart" dot size="18"></van-icon>
        <span style="color: black; padding-top: 2px">购物车</span>
      </div>
      <div
        style="margin-top: 1.5px"
        role="button"
        tabindex="0"
        class="van-goods-action-icon"
        @click="addCollect"
      >
        <van-icon
          name="star"
          :color="goods.userHasCollect != 0 ? '#f7b444' : '#bebebe'"
          size="19"
        ></van-icon>
        <span style="margin-top: 1.5px; color: black">收藏</span>
      </div>
      <van-goods-action-button
        type="warning"
        @click="skuClick"
        text="加入购物车"
      />
      <van-goods-action-button
        type="danger"
        @click="skuClick"
        text="立即购买"
      />
    </van-goods-action>
    <!--popup 区域-->
    <van-popup v-model="show" position="bottom">
      <img :src="img.header" alt @click="choose_right" />
    </van-popup>
  </div>
</template>

<script>
import {
  goodsDetail,
  cartGoodsCount,
  collectAddOrDelete,
  cartAdd,
  cartFastAdd,
  getWxConfig,
  authInfo,
  updateDuration,
  topicDetail,
  getMemberGoods,
  adList,
  getOrderSign,
} from '@/api/api';

import {
  Sku,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon,
  Popup,
  Toast,
  Divider,
  Dialog,
} from 'vant';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import popupProps from './popup-props';
import _ from 'lodash';
import wx from 'weixin-js-sdk';
import $ from 'jquery';
import member_card_link from '@/assets/images/member_card_link.png';
import orgkai from '@/assets/images/kaiorg.jpg';
import member_card_head from '@/assets/images/member_card_head1.png';
export default {
  props: {
    itemId: [String, Number],
  },
  data() {
    const isLogin = !!localStorage.getItem('Authorization');
    return {
      img: {
        header: member_card_head,
      },
      vipid: null,
      isOpen: true,
      userId: -1,
      share_userId: -1,
      status: 1,
      myPlayer: undefined,
      isiOS: false,
      quota: 0,
      memberObj: {
        memberPrice: 0,
        price: 0,
        limitNum: 0,
      },
      userInfo: '',
      showAddCar: true,
      current: 0,
      gallerysize: 1,
      ficationId: '',
      title: '',
      desc: '',
      link: '',
      orgkai: orgkai,
      initialSku: {},
      imgUrl: '',
      isLogin,
      xbutton: '<button style="position:absolute;top:0;right:0;">关闭</button>',
      share_icon: require('@/assets/images/share.png'),
      goods: {
        userHasCollect: 0,
        info: {
          gallery: [],
        },
      },
      sku: {
        tree: [],
        list: [],
        price: '1.00', // 默认价格（单位元）
      },
      skuGoods: {
        // 商品标题
        title: '',
        // 默认商品 sku 缩略图
        picture: '',
      },
      memberLevel: 0,
      cartInfo: 0,
      selectSku: {
        selectedNum: 0,
        selectedSkuComb: {
          sku_str: 'aa',
        },
      },
      propsPopup: false,
      showSku: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4',
            src: '',
          },
        ],
        poster: '', //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      //定时器
      setTimeout: null,
      member_card_link: member_card_link,
      show: false,
    };
  },
  watch: {
    $route: 'initData',
  },
  computed: {
    props_str() {
      let props_arr = [];
      _.each(this.goods.attribute, (json) => {
        props_arr.push([json['attribute'], json['value']]);
      });
      return props_arr || [];
    },
    playsinline() {
      let ua = navigator.userAgent.toLocaleLowerCase();
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false;
      } else {
        // ios端
        return true;
      }
    },
  },

  watch: {
    $route(to, from) {
      if (
        this.$route.query.share_userId != null &&
        this.$route.query.share_userId != undefined &&
        this.$route.query.share_userId != ''
      ) {
        this.share_userId = this.$route.query.share_userId;
      } else {
        let { shareId } = getLocalStorage('shareId');
        this.share_userId = shareId;
      }
      this.init();
    },
  },

  created() {
    if (
      this.$route.query.share_userId != null &&
      this.$route.query.share_userId != undefined &&
      this.$route.query.share_userId != ''
    ) {
      this.share_userId = this.$route.query.share_userId;
    } else {
      let { shareId } = getLocalStorage('shareId');
      this.share_userId = shareId;
    }
    this.initData();
    this.isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    this.getMembers();
    this.getUserInfo();
  },

  beforeRouteLeave(to, from, next) {
    // 仅适用于本页面不作为H5着陆页的情况
    if (this.showSku) {
      //this.$store.commit('SET_SKU_SHOW', false)
      this.showSku = false;
      next(false);
    } else if (this.propsPopup) {
      this.propsPopup = false;
      next(false);
    } else {
      updateDuration({
        goodsId: this.goods.info.id,
        url: this.link,
      }).then((res) => {});
      next();
    }
  },

  methods: {
    showPoup() {
      this.show = true;
    },
    // 数量
    stepperChange(num) {
      if (this.memberObj.limitNum == 0 || num <= this.memberObj.limitNum) {
        this.isOpen = true;
      } else {
        this.isOpen = false;
      }
    },

    skuSelected(selectedSku) {
      console.log(selectedSku);
      this.ficationId = selectedSku.skuValue.id;

      if (
        selectedSku.skuValue.name == '试机' ||
        selectedSku.skuValue.name == '定金' ||
        (this.goods.info.goodsType == 1 &&
          this.goods.info.name == '金牌会员年卡')
      ) {
        this.showAddCar = false;
        this.quota = 1;
      } else {
        this.showAddCar = true;
        this.quota =
          selectedSku &&
          selectedSku.selectedSkuComb &&
          selectedSku.selectedSkuComb.limitNum
            ? selectedSku.selectedSkuComb.memberPrice
            : 0;
      }
      if (!!selectedSku.selectedSkuComb) {
        this.memberObj.memberPrice = selectedSku.selectedSkuComb.memberPrice;
        this.memberObj.limitNum = selectedSku.selectedSkuComb.limitNum;
        this.memberObj.price = selectedSku.selectedSkuComb.price;
      }
    },
    onChange(index) {
      this.current = index;
    },
    onPlayerCanplay(player) {
      //this.myPlayer = player;  //viedeoplayer不在<templelte>根<div>下  所以$refs获取不到子组件实例   播放时赋值   后期调用
      var ua = navigator.userAgent.toLocaleLowerCase();
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('body')
          .find('video')
          .attr('x-webkit-airplay', true)
          .attr('x5-playsinline', true)
          .attr('webkit-playsinline', true)
          .attr('playsinline', true);
      } else {
        // ios端
        $('body')
          .find('video')
          .attr('webkit-playsinline', 'true')
          .attr('playsinline', 'true');
      }
    },
    onPlayerEnded(player) {
      if (!this.isiOS) {
        player.play();
        setTimeout(() => {
          player.pause();
        }, 100);
      }
    },
    closePlayer() {
      this.playerOptions.sources[0].src = '';
      this.playerOptions.sources[0].src = this.goods.info.videoUrl;
    },

    skuClick() {
      authInfo().then((res) => {
        let status = res.data.data.status;
        if (status == 0) {
          //未认证
          Toast('请先验证手机号!');
          this.$router.push({ path: `/check` });
          return;
        } else {
          this.showSku = true;
        }
      });
    },
    initData() {
      goodsDetail({
        id: this.itemId,
      }).then((res) => {
        this.goods = res.data.data;
        this.gallerysize = this.goods.info.gallery.length || 1;
        this.playerOptions.poster = this.goods.info.gallery[0];
        this.title = this.goods.info.name;
        this.desc = this.goods.info.brief;
        this.imgUrl = this.goods.info.gallery[0];
        this.playerOptions.sources[0].src = this.goods.info.videoUrl;
        this.skuAdapter();
        this.link =
          process.env.VUE_APP_BASE_API +
          'wechat/static/html/redirect.html?app3Redirect=' +
          encodeURIComponent(window.location.href); // 分享链接
        let str = window.location.href,
          num = str.indexOf('#'); //取得整个地址栏
        this.link = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ]
        this.$wxShare({
          title: this.title,
          desc: this.desc,
          link: this.link,
          imgUrl: this.imgUrl,
        });
      });

      cartGoodsCount().then((res) => {
        this.cartInfo = res.data.data;
      });
    },
    toCart() {
      this.$router.push({
        name: 'cart',
      });
    },
    addCollect() {
      let type = this.goods.userHasCollect;
      if (type === 1) {
        type = 0;
      } else {
        type = 1;
      }
      collectAddOrDelete({
        valueId: this.itemId,
        type: type,
      }).then((res) => {
        if (this.goods.userHasCollect === 1) {
          this.goods.userHasCollect = 0;
        } else {
          this.goods.userHasCollect = 1;
          this.$toast({
            message: '收藏成功',
            duration: 1500,
          });
        }
      });
    },
    getProductId(s1, s2) {
      var productId;
      var s1_name;
      var s2_name;

      _.each(this.goods.specificationList, (specification) => {
        _.each(specification.valueList, (specValue) => {
          if (specValue.id === s1) {
            s1_name = specValue.value;
          } else if (specValue.id === s2) {
            s2_name = specValue.value;
          }
        });
      });

      _.each(this.goods.productList, (v) => {
        let result = _.without(v.specifications, s1_name, s2_name);
        if (result.length === 0) {
          productId = v.id;
        }
      });
      return productId;
    },
    getProductIdByOne(s1) {
      var productId;
      var s1_name;
      _.each(this.goods.specificationList, (specification) => {
        _.each(specification.valueList, (specValue) => {
          if (specValue.id === s1) {
            s1_name = specValue.value;
            return;
          }
        });
      });

      _.each(this.goods.productList, (v) => {
        let result = _.without(v.specifications, s1_name);
        if (result.length === 0) {
          productId = v.id;
        }
      });
      return productId;
    },
    addCart(data) {
      let that = this;

      let params = {
        specificationId: Number(this.ficationId),
        goodsId: data.goodsId,
        number: data.selectedNum,
        productId: 0,
        shareUserId: that.share_userId,
      };
      if (_.has(data.selectedSkuComb, 's3')) {
        this.$toast({
          message: '目前仅支持两规格',
          duration: 1500,
        });
        return;
      } else if (_.has(data.selectedSkuComb, 's2')) {
        params.productId = this.getProductId(
          data.selectedSkuComb.s1,
          data.selectedSkuComb.s2
        );
      } else {
        params.productId = this.getProductIdByOne(data.selectedSkuComb.s1);
      }
      cartAdd(params).then(() => {
        this.cartInfo = this.cartInfo + data.selectedNum;
        this.$toast({
          message: '已添加至购物车',
          duration: 1500,
        });
        that.showSku = false;
      });
    },
    async buyGoods(data) {
      let that = this;
      let params = {
        specificationId: Number(this.ficationId),
        goodsId: data.goodsId,
        number: data.selectedNum,
        productId: 0,
        shareUserId: that.share_userId,
      };
      if (_.has(data.selectedSkuComb, 's3')) {
        this.$toast({
          message: '目前仅支持两规格',
          duration: 1500,
        });
        return;
      } else if (_.has(data.selectedSkuComb, 's2')) {
        params.productId = this.getProductId(
          data.selectedSkuComb.s1,
          data.selectedSkuComb.s2
        );
      } else if (_.has(data.selectedSkuComb, 's1')) {
        params.productId = this.getProductIdByOne(data.selectedSkuComb.s1);
      }
      await cartFastAdd(params)
        .then((res) => {
          let cartId = res.data.data;
          setLocalStorage({
            CartId: cartId,
          });
          if (this.setTimeout) {
            window.clearTimeout(this.setTimeout);
          }
          that.showSku = false;
        })
        .then(() => {
          if (this.setTimeout) {
            window.clearTimeout(this.setTimeout);
          }
          setTimeout(() => {
            this.$router.push('/order/checkout'); //等待3s跳转保证setLocalStorage成功并且有值
          }, 1000);
        });
    },
    skuAdapter() {
      const tree = this.setSkuTree();
      const list = this.setSkuList();
      const skuInfo = {
        price: parseFloat(this.goods.info.retailPrice), // 未选择规格时的价格
        stock_num: 10000, // TODO 总库存
        collection_id: '', // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
        none_sku: false, // 是否无规格商品
        hide_stock: true,
      };
      this.sku = {
        tree,
        list,
        ...skuInfo,
      };

      this.skuGoods = {
        title: this.goods.info.name,
        picture: this.goods.info.gallery[0],
      };
    },
    setSkuList() {
      var sku_list = [];
      _.each(this.goods.productList, (v) => {
        var sku_list_obj = {};
        _.each(v.specifications, (specificationName, index) => {
          sku_list_obj['s' + (~~index + 1)] =
            this.findSpecValueIdByName(specificationName);
        });
        sku_list_obj.price = v.price * 100;
        sku_list_obj.limitNum = v.limitNum;
        sku_list_obj.stock_num = v.number;
        if (v.memberPriceOpen == 1 || v.memberPriceOpen == 2) {
          sku_list_obj.memberPrice = v.memberPrice;
        }
        if (v.memberPriceOpen == 0) {
          this.isOpen = false;
        }
        // console.log(JSON.stringify(sku_list_obj))
        // console.log("this.goods.info.memberPrice" + JSON.stringify(this.goods.info.memberPrice))
        if (sku_list_obj.memberPrice == this.goods.info.memberPrice) {
          this.initialSku = sku_list_obj;
        }
        sku_list.push(sku_list_obj);
      });
      return sku_list;
    },
    findSpecValueIdByName(name) {
      let id = 0;
      _.each(this.goods.specificationList, (specification) => {
        _.each(specification.valueList, (specValue) => {
          if (specValue.value === name) {
            id = specValue.id;
            return;
          }
        });
        if (id !== 0) {
          return;
        }
      });
      return id;
    },
    setSkuTree() {
      let that = this;
      let specifications = [];
      _.each(this.goods.specificationList, (v, k) => {
        let values = [];
        _.each(v.valueList, (vv) => {
          vv.name = vv.value;
          values.push({
            id: vv.id,
            name: vv.value,
            imgUrl: vv.picUrl,
          });
        });

        specifications.push({
          k: v.name,
          v: values,
          k_s: 's' + (~~k + 1),
        });
      });

      return specifications;
    },

    // 获取用户会员信息
    getUserInfo() {
      authInfo().then((res) => {
        this.userInfo = res.data.data;
      });
    },
    getMembers() {
      getMemberGoods().then((res) => {
        this.membersGoods = res.data.data.list;
      });
    },
    choose_right(id) {
      if (id == 1) {
        this.vipid = 1181170;
      } else if (id == 2) {
        this.vipid = 1181214;
      }
      Dialog.confirm({
        title: '系统提示',
        message: '确定购买?',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          if (this.userInfo.mobile == undefined || this.userInfo.mobile == '') {
            Dialog.confirm({
              title: '系统提示',
              message: '请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {});
            return;
          }
          // this.$router.push({
          //   path: '/items/members-zone'
          // });
          this.pay(2);
        })
        .catch(() => {
          // on cancel
        });
    },
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: this.vipid,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: this.vipid,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },
  },

  components: {
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Sku.name]: Sku,
    [Toast.name]: Toast,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [popupProps.name]: popupProps,
    [Divider.name]: Divider,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
/deep/.van-icon-star {
  padding-bottom: 4px;
}
/deep/.van-icon-cart {
  padding-bottom: 4px;
}
/deep/.van-info--dot {
  margin-top: 5px !important;
  margin-right: 5px !important;
}
// 底部按钮调整
// /deep/.van-goods-action-button--warning {
//   margin-left: 30px;
// }
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
/deep/.van-goods-action {
  border-top: 1px solid #eeeeee;
}
.cont5 {
  display: flex;
  align-items: center;
  margin-top: 1px;
  font-size: 16px;
  font-weight: bold;

  img {
    margin-left: 6px;
    width: 48px;
    height: 16px;
  }
}

/deep/ .van-cell__value {
  text-overflow: ellipsis;
  white-space: nowrap;
}

/deep/ .vjs-custom-skin > .video-js .vjs-big-play-button {
  font-size: 2em;
  margin-top: 6.5em !important;
}

/deep/.vjs-fluid {
  padding-bottom: 43.75%;
}

/deep/.vjs-poster {
  background-size: 100% 100%;
}

/deep/.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.vjs-icon-play:before {
  font-size: 2.5em; //播放按钮三角大小
}

//播放按钮绝对定位
/deep/.vjs-custom-skin > .video-js .vjs-big-play-button {
  top: 10%;
  left: 52.5%;
  height: auto;
  line-height: auto;
}

/deep/.video-js .vjs-big-play-button {
  font-size: 20px;
  line-height: 3em !important;
  height: 3em !important;
  width: 3em;
  opacity: 0.6;
  border-radius: 1.5em;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.item_detail {
  img {
    max-width: 100vw;
  }
}

.van-swipe-item::after {
  content: '';
}

.item_cell_group {
  margin-bottom: 15px;

  /deep/ .van-cell__title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  /deep/ .van-cell__value {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    text-align: left;
  }
}

.item_price {
  font-size: 20px;
  color: $red;
  margin-right: 10px;
  font-weight: 600;
}

.item_market_price {
  color: $font-color-gray;
  text-decoration: line-through;
  font-size: $font-size-small;
}

.item-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
}

.item_dispatch {
  font-size: $font-size-small;
  color: $font-color-gray;
}

.item_intro {
  // line-height: 18px;
  // margin: 5px 0;
  line-height: 1.6;
  font-size: $font-size-small;
  color: $font-color-gray;
  overflow: hidden;
  display: -webkit-box;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item_desc {
  background-color: #fff;

  /deep/ p {
    padding: 0 12px;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }

  /deep/ img {
    width: 100%;
    display: block;
    margin-top: -1px;
  }
}

.item_desc_title {
  @include one-border;
  padding: 10px 0;
  text-align: center;
}

.van-info {
  right: 10px;
}

.subsequent {
  margin: -6px 0 6px 0;
}

.van-popup {
  border-radius: 16px 16px 0 0;
}
</style>
